<template>
  <!-- 商品分类 -->
  <el-card>
    <!-- 标题 -->
    <template #header>
      <h3 class="fs20">商品分类</h3>
    </template>

    <!-- 内容 -->
    <!-- 1. 添加分类按钮 -->
    <el-button type="primary" @click="dialogVisible = true">添加分类</el-button>

    <!-- 2. 表格 -->
    <!-- row：element提供的当前行的数据 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column label="分类名称">
        <template v-slot="{ row }">
          <span v-if="row.isEdit">{{ row.cateName }}</span>
          <el-input v-else v-model="row.cateName" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <!-- 3. 开关
        v-model="value"：默认控制开关的状态true（开启）、false（关闭）
        :active-value="1"：自定义开关打开时的值，boolean、string、number
        :inactive-value="0"：自定义开关关闭时的值，boolean、string、number -->
        <template v-slot="{ row }">
          <el-tooltip
            :content="row.state === 1 ? '开启' : '关闭'"
            placement="top"
          >
            <el-switch
              v-model="row.state"
              :active-value="1"
              :inactive-value="0"
              :disabled="row.isEdit"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 4. 操作按钮 -->
        <template v-slot="{ row }">
          <el-button
            :type="row.isEdit ? 'primary' : 'success'"
            size="mini"
            @click="editGoodsCate(row)"
            >{{ row.isEdit ? '编辑' : '完成' }}</el-button
          >
          <el-button
            :type="row.isEdit ? 'danger' : 'info'"
            size="mini"
            @click="delGoodsCate(row)"
            >{{ row.isEdit ? '删除' : '取消' }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 5. 分页 -->
    <el-pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[2, 4, 6, 8]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <!-- 6. 编辑对话框
    :visible.sync="dialogVisible"：对话框显示（true）、隐藏（false）
    center：内容居中 -->
    <el-dialog
      title="添 加 分 类"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <!-- 7. 对话框内容 -->
      <el-form
        :model="addCateForm"
        :rules="rules"
        ref="addCateForm"
        label-width="100px"
      >
        <el-form-item label="活动名称" prop="cateName">
          <el-input v-model="addCateForm.cateName"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="state">
          <el-tooltip
            :content="addCateForm.state ? '是' : '否'"
            placement="top"
          >
            <el-switch
              v-model="addCateForm.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-tooltip>
        </el-form-item>
      </el-form>

      <!-- 8. 对话框按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGoodsCate('addCateForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { cateList, addCate, delCate, editCate } from '@/api/goods.js' // 请求：获取商品分类、添加分类、编辑分类、删除分类

export default {
  data() {
    return {
      /* 表格数据 */
      tableData: [], // 表格数据

      /* 分页数据 */
      total: 0, // 数据总条数
      currentPage: 1, // 默认当前页码
      pageSize: 8, // 默认每页条数

      /* 对话框数据 */
      dialogVisible: false, // 对话框的显示隐藏
      addCateForm: {
        cateName: '', // 分类名
        state: true // 是否启用
      }, // 表单数据
      rules: {
        cateName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      } // 表单验证规则
    }
  },

  created() {
    /* 获取商品分类 */
    this.getCateList()
  },

  methods: {
    /* 获取商品分类 */
    async getCateList() {
      /* 请求参数说明：
      currentPage：当前页,int
      pageSize：每页条数，int */

      /* 响应参数说明：
      data：表格数据
      total：数据总条数 */

      // 1. 发起获取商品分类请求
      const { data, total } = await cateList({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })

      // 2. 给每条数据添加一个控制是否可以编辑的数据isEdit
      data.forEach((v) => {
        v.isEdit = true
      })

      // 3. 渲染数据
      this.tableData = data
      this.total = total
    },

    /* 添加分类 */
    addGoodsCate(addCateForm) {
      this.$refs[addCateForm].validate(async (valid) => {
        // 1. 表单验证通过：发请求
        if (valid) {
          /* 请求参数说明：
          cateName：分类名称，String
          state：是否启用，Boolean */

          /* 响应参数说明：
          code：状态码，0代表成功，1代表失败，5001参数错误
          msg：提示信息 */

          // 2. 发起添加分类请求
          const { code, msg } = await addCate({
            cateName: this.addCateForm.cateName,
            state: this.addCateForm.state
          })

          // 3. 判断状态码，执行不同功能
          if (code === 0) {
            // 4. 请求成功：提示成功信息
            this.$message.success({
              message: msg,
              center: true
            })

            // 5. 重新获取表格数据
            this.getCateList()

            // 6. 关闭对话框
            this.dialogVisible = false
          } else {
            // 7. 请求失败：提示失败信息
            this.$message.error({
              message: msg,
              center: true
            })
          }
        } else {
          // 7. 表单验证不通过，提示信息
          this.$message.warning({
            message: '输入错误，请按照规则填写表单！',
            center: true
          })
        }
      })
    },

    /* 编辑分类 */
    async editGoodsCate(row) {
      // 1. 判断isEdit状态，执行不同功能
      if (row.isEdit) {
        // 2. 不可编辑：点击编辑按钮开始编辑
        row.isEdit = !row.isEdit
      } else {
        /* 请求参数说明：
        id：分类id，int
        cateName：分类名称，String
        state：分类状态，Boolean */

        /* 响应参数说明：
        code：状态码，0代表成功，1代表失败，5001参数错误
        msg：提示信息 */

        // 3. 可编辑：点击完成按钮发送请求
        const { code, msg } = await editCate({
          id: row.id,
          cateName: row.cateName,
          state: Boolean(row.state)
        })

        // 4. 判断状态码，执行不同功能
        if (code === 0) {
          // 5. 请求发送成功
          this.$message.success({
            message: msg,
            center: true
          })

          // 6. 关闭可编辑状态
          row.isEdit = !row.isEdit

          // 7. 重新获取表格数据
          this.getCateList()
        } else {
          // 8. 请求发送失败
          this.$message.error({
            message: msg,
            center: true
          })
        }
      }
    },

    /* 删除分类 */
    delGoodsCate(row) {
      if (!row.isEdit) {
        // 1. 取消编辑：点击取消按钮关闭编辑
        row.isEdit = !row.isEdit

        // 2. 重新获取表格数据
        this.getCateList()
        return
      }

      // 2. 点击删除按钮弹出confirm确认框
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

        // 3. 确定
        .then(async () => {
          /* 请求参数说明：
          id：要删除分类的id，int */

          /* 响应参数说明：
          code：状态码，0代表成功，1代表失败，5001参数错误
          msg：提示信息 */

          // 4. 发起删除分类请求
          const { code, msg } = await delCate({ id: row.id })

          // 5. 判断状态码提示删除分类成功或失败
          if (code === 0) {
            // 6. 提示删除成功信息
            this.$message.success({
              message: msg,
              center: true
            })
          } else {
            // 7. 提示删除失败信息
            this.$message.error({
              message: msg,
              center: true
            })
          }

          // 8. 重新获取表格数据
          this.getCateList()
        })

        // 9. 取消
        .catch(() => {
          // 10. 提示取消信息
          this.$message.info({
            message: '已取消删除',
            center: true
          })
        })
    },

    /* 分页方法 */
    /* 当前每页条数改变 */
    handleSizeChange(val) {
      // 1. 改变pageSize的值
      this.pageSize = val

      // 2. 重新获取表格数据
      this.getCateList()
    },

    /* 当前页码改变 */
    handleCurrentChange(val) {
      // 1. 改变currentPage的值
      this.currentPage = val

      // 2. 重新获取表格数据
      this.getCateList()
    }
  },

  watch: {
    /* 监听编辑对话框的显示隐藏状态 */
    dialogVisible() {
      // 1. 当编辑对话框关闭时候，把表单重置
      if (!this.dialogVisible) {
        this.$refs.addCateForm.resetFields()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 20px;
}

.el-pagination {
  margin-top: 30px;
}

/deep/.el-dialog {
  min-width: 500px;
}
</style>